<template>

  <div>
    <!--
    大坑！！
      必须用【div】容器, 将【所有元素】包围起来。
      否则: 直接继承在【<template> 节点下】就会【挂掉】。
    -->
    <h1>个人信息</h1>
    <!-- {{ $route.params.id }} -->
    {{ id }}
  </div>

</template>

<script>
  // 获取【传入参数 id】
  export default {
    props: ['id'],
    name: "UserProfile",

    // 【路由钩子（路由动作）】 = 过滤器(进出) -> 链式编程
    beforeRouteEnter: (to, from, next) => {
      console.log("进入 routes 到该页面 之前"); // 进入之前, 加载数据
      next(vm => { // vm 代表【本模块】
        vm.getData(); // 进入 routes 之前, 执行 getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开 当前页面 之后");
      next();
    },
    methods: {
      getData: function() {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function(response) {
          console.log(response);
        });
      }
    }


  }
</script>

<style scoped>
</style>
